const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
const leave1 = [
    [1, 2, 3, 4, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0],
    [0, 0, 1, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0],
    [0, 0, 1, 0, 1, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 1, 0, 1, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 1, 0, 1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 4, 0, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 4, 0, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 5, 0, 5, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 5, 0, 5, 0, 0, 0, 2, 2, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 3, 3, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
];
const imgList = Array.from({ length: 8 }, () => new Image());
let flag = false;
const people = { x: 64, y: 64, direction: 'top' };
let bulletList = [];
//异步加载图像资源
async function initImg() {
    const imgsrc = [
        'http://127.0.0.1:5500/canvas/tankedazhan/images/8.jpeg',
        'http://127.0.0.1:5500/canvas/tankedazhan/images/shitou.png',
        'http://127.0.0.1:5500/canvas/tankedazhan/images/tiekuai.png',
        'http://127.0.0.1:5500/canvas/tankedazhan/images/shui.png',
        'http://127.0.0.1:5500/canvas/tankedazhan/images/cao.png',
        'http://127.0.0.1:5500/canvas/tankedazhan/images/huakuai.png',
        'http://127.0.0.1:5500/canvas/tankedazhan/images/menu.gif',
        'http://127.0.0.1:5500/canvas/tankedazhan/images/tankAll.gif'
    ];
    for (let i = 0; i < imgsrc.length; i++) {
        imgList[i].src = imgsrc[i];
        await new Promise(resolve => setTimeout(resolve, 10));
    }
}
//处理键盘按下事件，控制坦克移动和射击
onkeydown = function (e) {
    const directions = { 87: 'top', 68: 'right', 65: 'left', 83: 'bottom' };
    if (directions[e.keyCode]) {
        people.direction = directions[e.keyCode];
        movePeople(e.keyCode);
    } else if (e.keyCode == 13) {
        flag = !flag;
        document.body.insertAdjacentHTML('beforeend', `<audio src="http://127.0.0.1:5500/canvas/tankedazhan/audio/start.mp3" autoplay id="audio"></audio>`);
    } else if (e.keyCode == 32) {
        shootBullet();
    }
};
//根据按键移动坦克
function movePeople(keyCode) {
    if (keyCode == 87) people.y -= 5;
    else if (keyCode == 68) people.x += 5;
    else if (keyCode == 65) people.x -= 5;
    else if (keyCode == 83) people.y += 5;
    checkBoundaries();
}
//检查坦克是否超出边界并进行修正
function checkBoundaries() {
    if (people.x < 0) people.x = 0;
    if (people.y < 0) people.y = 0;
    if (people.x > 609) people.x = 609;
    if (people.y > 609) people.y = 609;
}
//创建并发射子弹
function shootBullet() {
    const { x, y, direction } = people;
    $('#audio').attr('src', `http://127.0.0.1:5500/canvas/tankedazhan/audio/attack.mp3`);
    const bullet = { x: direction === 'left' ? x : direction === 'right' ? x + 32 : x + 13, y: direction === 'top' ? y : direction === 'bottom' ? y + 32 : y + 13, direction };
    bulletList.push(bullet);
}

const main = {
    //绘制地图和坦克
    drawditu() {
        context.clearRect(0, 0, canvas.width, canvas.height);
        leave1.forEach((row, i) => row.forEach((tile, j) => {
            if (tile === 0) { context.fillStyle = '#000'; context.fillRect(32 * j, 32 * i, 32, 32); }
            if (tile !== 0) context.drawImage(imgList[tile], 0, 0, 30, 30, 32 * j, 32 * i, 32, 32);
        }));
        this.drawtank();
        this.ziDanList();
    },
    //绘制坦克
    drawtank() {
        const { x, y, direction } = people;
        const positions = { top: 0, right: 96, left: 64, bottom: 32 };
        context.drawImage(imgList[7], positions[direction], 0, 32, 32, x, y, 32, 32);
    },
    //绘制并更新子弹
    ziDanList() {
        bulletList.forEach((bullet, i) => {
            const { x, y, direction } = bullet;
            const positions = { left: [92, 96], right: [98, 96], top: [80, 96], bottom: [86, 96] };
            context.drawImage(imgList[7], ...positions[direction], 6, 6, x, y, 6, 6);
            bullet.x += direction === 'left' ? -5 : direction === 'right' ? 5 : 0;
            bullet.y += direction === 'top' ? -5 : direction === 'bottom' ? 5 : 0;
            if (x < 0 || x > 620 || y < 0 || y > 620) {
                $(`#audio`).attr('src', 'http://127.0.0.1:5500/canvas/tankedazhan/audio/playerCrack.mp3');
                context.drawImage(imgList[7], 320, 0, 32, 32, x - 8, y - 8, 20, 20);
                bulletList.splice(i, 1);
            }
        });
    }
};
//定时更新画布内容
setInterval(() => {
    if (flag) main.drawditu();
    else context.drawImage(imgList[6], 0, 0, 640, 640);
}, 1000 / 30);
//异步加载图像资源
(async () => {
    await initImg();
})();
